<template>
  <el-card shadow="never" class="chart-card" :body-style="{ padding: '12px 20px 12px' }">
    <div class="chart-card__header">
      <span class="chart-card__title">租约状态统计</span>
      <el-button
        v-if="showRefresh"
        type="text"
        size="mini"
        icon="el-icon-refresh"
        @click="$emit('refresh')"
      >刷新</el-button>
    </div>
    <div class="chart-card__body">
      <el-skeleton :loading="loading" animated>
        <template #template>
          <el-skeleton-item variant="rect" class="chart-card__skeleton" />
        </template>
        <template #default>
          <div v-if="hasData" ref="chart" class="chart-card__chart"></div>
          <el-empty v-else description="暂无数据" :image-size="80" />
        </template>
      </el-skeleton>
    </div>
  </el-card>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons");
import resize from "./mixins/resize";

export default {
  name: "LeaseStatusChart",
  mixins: [resize],
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: false,
    },
    showRefresh: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  computed: {
    categories() {
      return (this.data || []).map((item) => item.label);
    },
    seriesValues() {
      return (this.data || []).map((item) => Number(item.value) || 0);
    },
    hasData() {
      return this.seriesValues.some((value) => value > 0);
    },
  },
  watch: {
    data: {
      deep: true,
      handler() {
        this.$nextTick(() => this.renderChart());
      },
    },
    loading(val) {
      if (!val) {
        this.$nextTick(() => this.renderChart());
      }
    },
  },
  mounted() {
    this.$nextTick(() => this.renderChart());
  },
  beforeDestroy() {
    this.disposeChart();
  },
  methods: {
    renderChart() {
      if (this.loading || !this.hasData) {
        this.disposeChart();
        return;
      }
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.chart, "macarons");
      }
      this.chart.setOption(
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            top: 32,
            left: "3%",
            right: "6%",
            bottom: 40,
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: this.categories,
            axisLabel: {
              interval: 0,
              rotate: this.categories.length > 5 ? 20 : 0,
            },
            axisTick: {
              alignWithLabel: true,
            },
          },
          yAxis: {
            type: "value",
            minInterval: 1,
            axisLabel: {
              formatter: (val) => `${val}`,
            },
          },
          series: [
            {
              name: "租约数量",
              type: "bar",
              data: this.seriesValues,
              barMaxWidth: 60,
              itemStyle: {
                color: "#67C23A",
              },
              label: {
                show: true,
                position: "top",
                formatter: "{c}份",
              },
            },
          ],
        },
        true
      );
    },
    disposeChart() {
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-card {
  width: 100%;
  min-height: 360px;

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

    .chart-card__title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  &__body {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__chart {
    width: 100%;
    height: 300px;
  }

  &__skeleton {
    width: 100%;
    height: 300px;
    border-radius: 12px;
  }
}
</style>
